<template>
    <div>
        <el-container>
                <el-header id="me_head">
                    <el-input id="me_textarea"
                        type="textarea"
                        :rows="5"
                        placeholder="请输入内容"
                        v-model="textarea">
                    </el-input>
                    <i class="el-icon-camera update_img_btn" @click="add_pic()"></i>
                    <input type="file" name="" id="" ref="file" style="display:none" @change="get_img($event)">
                    <el-collapse-transition>
                        <div class="img_list" v-show="img_list.length" >
                            <div v-for="(item,index) in img_list" :key="index" class="relative">
                                <img class="img_list_item"  :src="item" alt="">
                                <i class="el-icon-close del_img" @click="del_img(index)"></i>
                            </div>
                        </div>
                    </el-collapse-transition>
                </el-header>
                <el-main>
                    <div class="diary_item" v-for="(item,index) in invitation" :key="index">
                        <div class="user_head">
                            <img :src="item.head_icon" alt="">
                            <div class="user_data">
                                <div class="user_name">{{item.diary_master}}</div>
                                <div class="user_time">{{item.time | time}}</div>
                            </div>
                            <el-dropdown trigger="click">
                                <span class="el-dropdown-link">
                                    <i class="el-icon-arrow-down el-icon--right" id="caozuo_more"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item icon="el-icon-plus">删除</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-circle-plus">编辑</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <div class="diary_text">{{item.text}}</div>
                        <div class="diary_img_list" >
                            <div class="diary_img_list_item">
                                <img v-for="(item,index) in item.img" :key="index" :src="item" alt="">
                            </div>
                        </div>
                        <div class="caozuo">
                            <i :class="item.love?'iconfont icon-dianzan love_action':'iconfont icon-dianzan'" @click="love(item.id,item.love,index)"></i>
                        </div>
                        <hr style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="95%" color=#987cb9 SIZE=1>
                        <div class="pinglun">
                            <div class="pinglun_item" v-for="(item,index) in item.pinglun" :key="index">
                                <div v-if="item.user_name===item.huifu_name">{{item.user_name}}:{{item.text}}</div>
                                <div class="suojin" v-else>{{item.user_name}}回复{{item.huifu_name}}:{{item.text}}</div>
                            </div>
                        </div>
                    </div>
                </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    created(){
        this.get_invitation()
    },
    data(){
        return{
            textarea:"",
            img_list:[require("../../public/img/终极大树.png")],
            invitation:[
                {
                    love:0,
                    head_icon:require('../../public/img/终极大树.png'),
                    id:'123',
                    diary_master:'jiahui',
                    text:"hahahaa",
                    img:[require('../../public/img/终极大树.png')],
                    mood:3,
                    time:1612699320,
                    pinglun:[
                        {
                            user_name:'jiahui',
                            huifu_name:'jiahui',
                            text:'我测试第一个'
                        },
                        {
                            user_name:'wangyayu',
                            huifu_name:'jiahui',
                            text:'我测试回复评论'
                        }
                    ]
                }
            ]
        }
    },
    methods:{
    get_invitation(){
      this.$axios.post(this.$api+'getDiary_and_pinglun',this.$qs.stringify({"user_id":sessionStorage.getItem('user_id')})).then((res)=>{
        this.invitation=res.data.data
       }).catch((err)=>{
        console.log(err)
       })
    },
    add_pic(){
         this.$refs.file.click()
     },
    get_img(e){
         console.log(e.target.files[0])
         if(!/image/g.test(e.target.files[0].type)){
            this.$message({
            message: '由于技术问题,只能添加图片',
            type: 'warning'
            });
            return
         }
         let img=e.target.files[0]
         let reader=new FileReader()
         reader.readAsDataURL(img)
         let that = this
         reader.onload=function () {
             that.img_list.push(String(this.result))
         }
    },
    del_img(index){
        this.img_list.splice(index,1)
    },
    love(id,love,index){
        this.invitation[index].love=Number(!love)
        if(love===0){
          this.$axios.post(this.$api+'add_love',this.$qs.stringify({diary_id:id,user_id:sessionStorage.getItem('user_id')})).then(
            console.log('添加成功') 
        ).catch(
          (err)=>console.log(err)
        )
        }else{
          this.$axios.post(this.$api+'del_love',this.$qs.stringify({diary_id:id,user_id:sessionStorage.getItem('user_id')})).then(
            console.log('删除成功,')
        ).catch(
          (err)=>console.log(err)
        )  
        }
    }
    }
}
</script>
<style>
#me_textarea{
    height: 90%;
    width: 100%;
    text-align: left;
}
.el-textarea{
    height: 75%;
    width: 70%;
    padding-top: 25px;
    
}
#me_head{
    height: auto !important;
    text-align: left !important;
}
.update_img_btn{
    padding: 50px 20px;
}
.img_list{
    line-height: 0;
    padding: 5px 0;
}
.img_list_item{
    max-height: 160px;
    display: inline-block;
    width: 160px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.relative{
    position: relative;
    width: 160px;
    height: 160px;
    overflow: hidden;
    display: inline-block;
}
.del_img{
  position:absolute !important;
  bottom: .1rem;
  right: .1rem;
  z-index: 1;
  color: red !important;
} 
.diary_item{
    text-align: left !important;
    font-size: x-large;
    margin: 20px 0;
    border: 1px solid;
    border-bottom: 22px solid;
}
.user_head{
    position: relative;
}
.user_head>img{
    width: 50px;
    height: 50px;
    display: inline-block;
}
.user_head>img::after{
    content: "";
    background: url('../../public/img/error.png');
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: white;
    background-size: 100%;
}
.user_data{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 75px;
}   
.diary_img_list>img{
    max-width: 30%;
    display: inline-block;
    padding: 5px;
}
.suojin{
    text-indent: 2em;
}
.diary_text{
    padding: 10px;
}
.el-main{
    border: double;
}
.zan{
    width: 35px;
    display: inline-block;
}
.el-dropdown{
    position: absolute;
    right: 5%;
}
.diary_img_list_item{
    max-height: 300px;
    overflow: hidden;
    max-width: 33%;
    padding: 3px;
    margin-bottom: 10px;
}
.diary_img_list_item>img{
    width: 100%;
}
.love_action{
    color: red;
}
.iconfont{
    font-size: 30px;
}
</style>